<#assign className = table.className>
<#assign classNameLower = className?uncap_first>
import React from 'react';
import { connect } from 'dva';
import { Table, Pagination, Popconfirm,Button } from 'antd';
import { routerRedux,Link} from 'dva/router';
import { PAGE_SIZE } from '../constants/constants';
import Modal from '../components/Modal/Modal';
const ButtonGroup = Button.Group;



function ${className}({ dispatch, list: dataSource, loading, total, page: current }) {
  
  function pageChangeHandler(page) {
    dispatch(routerRedux.push({
      pathname: '/${classNameLower}',
      query: { page },
    }));
  }
  
  function addHandler(values){
       dispatch({
        type: '${classNameLower}/add',
        payload: { values },
     });
  }
  function editHandler(id, values) {
    dispatch({
      type: '${classNameLower}/patch',
      payload: { id, values },
    });
  }

  function deleteHandler(id) {
    dispatch({
      type: '${classNameLower}/remove',
      payload: id,
    });
  }
 let recordNull={
    <#list table.fileds as column>
    ${column.columnNameFirstLower}:"",
    </#list>
};

 const config=[
    <#list table.fileds as column>
        {
        key:"${column.columnNameFirstLower}",
        isInit:true,
        isShow:true,
        isEdit:true
        },
    </#list>
    ];
 const columns = [
    <#list table.fileds as column>
    {
    title: '${column.columnNameFirstLower}',
    dataIndex: '${column.columnNameFirstLower}',
    key: '${column.columnNameFirstLower}',
    },
    </#list>
    {
      title: '操作',
      key: 'operation',
      render: (text, record) => (
        <span >
          <ButtonGroup>
              <Modal config={config} record={record} onOk={editHandler.bind(null, record.id)}>
                <Button type="primary">编辑</Button>
              </Modal>
              <Popconfirm title="确认删除吗?" onConfirm={deleteHandler.bind(null, record.id)}>
                <Button type="primary">删除</Button>
              </Popconfirm>
              <Link to={`user/${r'${record.id}'}`}>
                <Button type="primary">详情</Button>
              </Link>               
          </ButtonGroup>
        </span>
      ),
    },
  ];


const addConfig=[
        <#list table.fileds as column>
        {
        key:"${column.columnNameFirstLower}",
        isInit:true,
        isShow:true,
        isEdit:true
        },
        </#list>
    ];

  return (   
    <div >
      <div>
        <Modal  config={addConfig}  record={recordNull} onOk={addHandler.bind(null)}>
            <Button type="primary"   >添加</Button>
        </Modal>
        <Table
          columns={columns}
          dataSource={dataSource}
          loading={loading}
          rowKey={record => record.id}
          pagination={false}          
        />        
        <Pagination
          className="ant-table-pagination"
          total={total}
          current={current}
          pageSize={PAGE_SIZE}
          onChange={pageChangeHandler}
        />
      </div>
    </div>
  );
}

function mapStateToProps(state) {
  const { list, total, page } = state.${classNameLower};
  return {
    loading: state.loading.models.${classNameLower},
    list,
    total,
    page,
  };
}

export default connect(mapStateToProps)(${className});